<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>渣渣萍</title>
		<!-- 图标显示-->
		<link href="img/5.jpg" rel="icon" /> 
		<style type="text/css">
			html body{
				width: 100%;
				height: 100%;
				background-color: #c7c7c7;
			}
		    body,ul{
				margin: 0;
				padding: 0;
			}
			div{
				padding: 20px;
				margin: 200px auto;
				width: 1160px;
				height: 128px;
				background-color: white;
				overflow: hidden;
			}
			ul{	
				width: 2000px;
				list-style: none;
				
			}
			ul li{
				float: left;
				width: 187px;
				height: 125px;
				background-color: pink;
				margin-right: 8px;  /*两张照片的距离*/
				overflow: hidden;
				border-radius: 10%;  /*圆角边框*/
				transition: all 0.4s; /*过度时间*/
			}
			img{	
				width: 100%;
				height: 100%;
				/*transition: 1s; /*过度时间*/
			}
			/*.list:hover img{
				transform: scale(2); /*缩放
			}*/
			ul:hover li{  /*鼠标滑过ul标签的效果*/
				width: 170px;
			}
			ul li:hover{   /*鼠标滑过ul li标签的效果*/
				width: 250px;
				border-radius: 50%;  /*圆角边框*/
			}
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li class="list"><img src="img/12.jpg"></li>
				<li class="list"><img src="img/2.jpg"></li>
				<li class="list"><img src="img/3.jpg"></li>
				<li class="list"><img src="img/4.jpg"></li>
				<li class="list"><img src="img/5.jpg"></li>
				<li class="list"><img src="img/8.jpg"></li>
			</ul>
		</div>
	</body>
</html>
